<template>
  
    <div class="map">
      <div id="chart" style="width: 29rem; height: 500px;"></div>
    </div>
    
  
</template>

<script>

import echarts from'echarts';
//导入中国地图
import 'echarts/map/js/china';
import jsonp from 'jsonp';

let option = {
          //标题
          title: {
            // text: '疫情地图',
            subtext: '国内疫情地图',
            x: 'center',
            textStyle: {
              color: '#9c0505'
            }
            
          },
          //提示
          tooltip: {  
             trigger: 'item',
             formatter: '地区： {b}<br/>确诊: {c}'
          },
          //视觉地图
          visualMap: {
            type: 'piecewise',
            show: true,
            pieces: [
                {min: 10000}, // 不指定 max，表示 max 为无限大（Infinity）。
                {min: 1000, max: 9999},
                {min: 100, max: 999},
                {min: 10, max: 99},
                {min: 1, max: 9,},
                {value: 0}, // 表示 value 等于 123 的情况。

            ],
            inRange: {
              color: ['#fff', '#ffaa85', '#660208'],
              
            }
          },
          //数据
          series: [
          {
            type: 'map',
            map: 'china',
            // data: [
            //    {name: '北京', value: 200},
            //    {name: '湖北', value: 500},
            //    {name: '广东', value: 20000},
            //    {name: '香港', value: 2000},
            //    {name: '云南', value: 200000},
            // ],
            label: {
              show: true,
              color: '#333333',
              fontSize: 12
            },
            zoom: 1.3,
            itemStyle: {
              borderColor: '#cdcdcd',
              color: ''
            },
            //点击后的样式
            emphasis: {
              label: {
                color: '#fff',
                fontSize: 12
              },
              itemStyle: {
                areaColor: 'skyblue'
              }

            }

          },
          ],

          
        }

export default {
 


  data() {
    return {
       myChart: ''
    };
  },
  mounted(){
    this.setCharts()
    this.getData()
  },

  methods: {
    // 获取地图数据
    getData(){
       jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json? =1580892522427',(err,data) => {
          var lists = data.data.list.map(item => {
            return {name: item.name, value: item.value}
          })
          //赋值
          option.series[0].data = lists;
          //设置
          this.myChart.setOption(option);
          // 给地图添加点击事件
          // this.myChart.on("click", function (param){
          //   alert(param.dataIndex+':'+option.series[0].data[param.dataIndex].name);
          // });
       })

    },
    //地图
    async setCharts(){
        // this.$refs 只在页面加载完成后又用mounted
        this.myChart = echarts.init(document.getElementById('chart'));
        // this.myChart.setOption(option);
      }

  },
}
</script>

<style lang="scss" scoped>
 canvas {
   width: 100%;
 }

 #chart div {
  width: 100% !important;
 }
</style>
